<template>
  <div class="top-header">
    <div class="top-header-content">
      <!-- 左侧链接 -->
      <div class="top-nav-link">
        <ul>
          <!-- <li v-for="(item,index) in navLink" :key="index">
            <i v-if="item.icon" :class="item.icon"></i>{{item.title}}
          </li> -->
          <li>
            <i class="iconfont icon-bilibili-fill"></i>
            主站
          </li>
          <li>番剧</li>
          <li class="nav-link-game">游戏中心
            <div class="game-centre">
              <!-- 小三角 -->
              <div class="triangle"></div>
              <!-- 左侧游戏推荐 -->
              <div class="game-left">
                <div class="game-left-banner">
                  <img src="../../assets/img/yxzx.jpg" alt="">
                  <span>公主链接Re:Dive</span>
                </div>
                <div class="game-left-list">
                  <div class="game-list-item" v-for="(item,index) in gameList" :key="index">
                    <img :src="item.img" :alt="item.name" :title="item.name">
                    <span>{{item.name}}</span>
                  </div>
                </div>
              </div>
              <!-- 右侧游戏名称 -->
              <div class="game-right">
                <div class="game-right-all">
                  <div class="right-all-item" v-for="(item,index) in gameAll" :key="index" @mouseenter="gameEnter(index)"
                    @mouseleave="gameLeave()">
                    <span>{{item.name}}</span>
                  </div>
                </div>
              </div>
              <!-- 右侧游戏人物图 -->
              <div class="game-right-img" v-for="(item,index) in gameAll" :key="index" :style='"background-image:url("+item.img+")"'
                v-show="index == rightImgIndex"></div>
            </div>
          </li>
          <li class="nav-link-game">直播
            <div class="game-centre live-center">
              <div class="triangle"></div>
              <div class="live-hot">
                <h3 class="live-hot-title">热门直播：</h3>
                <div class="live-hot-list">
                  <div class="live-hot-item" v-for="(item,index) in liveHotList" :key="index">
                    <img class="liveHot-item-img" :src="item.img" alt="">
                    <div class="liveHot-item-hover">LIVE</div>
                    <p class="liveHot-item-name" :title="item.name">{{item.name}}</p>
                  </div>
                </div>
              </div>
              <div class="hot-events">
                <h3 class="hot-events-title">热门活动：</h3>
                <div class="hot-events-item">
                  <img src="../../assets/img/live_2.png" alt="">
                </div>
              </div>
            </div>
          </li>
          <li>会员购</li>
          <li class="nav-link-game">漫画
            <div class="game-centre cartoon-canter">
              <div class="triangle"></div>
              <div class="cartoon-left">
                <div class="cartoon-left-item" v-for="(item,index) in cartoonList" :key="index">
                  <div class="cartoonLeft-item-relative">
                    <div class="cartoonLeft-item-imgbox">
                      <div class="cartoonLeft-item-img" :style='"background-image:url("+item.img+")"'></div>
                    </div>
                    <div class="cartoonLeft-item-name" :title="item.name">{{item.name}}</div>
                  </div>
                </div>
              </div>
              <div class="cartoon-middle"></div>
              <div class="cartoon-right">
                <div class="cartoon-right-title">人气漫画</div>
                <div class="cartoon-right-list">
                  <div class="cartoon-right-item" v-for="(item,index) in cartoonRightList" :key="index" @mouseenter="cartoonEnter(index)"
                    @mouseleave="cartoonLeave()">
                    <span>{{index+1}}</span>
                    <span>{{item.name}}</span>
                  </div>
                </div>
              </div>
              <div class="cartoon-cover" v-for="(item,index) in cartoonRightList" :key="index" :style='"background-image:url("+item.img+")"'
                v-show="index == cartooncoverIndex"></div>
            </div>
          </li>
          <li>赛事</li>
          <li class="nav-link-game">
            <i class="iconfont icon-shouji iconapp"></i>
            下载APP
            <div class="game-centre app-download">
              <div class="triangle"></div>
            </div>
          </li>
        </ul>
      </div>
      <div class="top-nav-search">
        <div class="nav-search">
          <!-- 搜索 -->
          <form action="#">
            <input type="text" :placeholder="navplaceholder" v-model="keyword" @click.stop="inpfocus()">
            <div class="nav-search-btn" @click.stop="search()"><i class="iconfont icon-sousuo"></i></div>
          </form>
          <!-- 搜索历史 -->
          <ul class="nav-search-history" v-show="isShow">
            <li v-for="(item,index) in searchhistory" :key="index">
              <span>{{item.name}}</span>
              <i class="iconfont icon-quxiao" @click.stop="delecthistory(index)"></i>
            </li>
          </ul>
        </div>
      </div>
      <!-- 用户功能 -->
      <div class="top-nav-userInfo">
        <!-- 用户头像 -->
        <div class="userInfo-avatar">
          <!-- <span class="userInfo-avatar-img" ref='userInfoAvatarImg' @mouseenter="AvatarImgEnter()"></span> -->
          <span class="userInfo-avatar-img" id="userInfo-avatar-img" ref='userInfoAvatarImg'></span>
          <!-- 用户中心 -->
          <div class="userInfo-core" ref='userInfoCore' @mouseenter="coreEnter()" @mouseleave="coreLeave()">
            <!-- 头像 -->
            <div class="userInfo-core-avatar" ref='userInfoCoreAvatar'></div>
            <!-- 用户昵称 -->
            <p class="userInfo-name">{{userInfo.name}}</p>
            <div class="userInfo-vip">
              <span>{{userInfo.vip}}</span>
            </div>
            <!-- 用户等级 -->
            <div class="userInfo-level-content">
              <!-- 等级显示 -->
              <div class="userInfo-level-info">
                <span>等级 {{userInfo.gradenum}}</span>
                <span>{{userInfo.exp}} / {{userInfo.exptotal}}</span>
              </div>
              <!-- 经验条  颜色宽度/外层div宽度*100 -->
              <div class="userInfo-exper-content">
                <div class="userInfo-exper-bar">
                  <div class="userInfo-exper-progress" :style="'width:'+parseInt(userInfo.exp / userInfo.exptotal * 100 )+'%'"></div>
                </div>
              </div>
              <!-- 右侧提示 -->
              <div class="level-intro-right">
                <div class="intro-header-text">作为LV5，你可以：</div>
                <div class="intro-middle">
                  <p>1、购买邀请码（1个/月）</p>
                  <p>2、发射个性弹幕（彩色、高级、顶部、底部）</p>
                  <p>3、参与视频互动（评论、添加tag）</p>
                  <p>4、投稿成为偶像</p>
                </div>
                <span class="intro-bottom">会员等级相关说明<i class="iconfont icon-you"></i></span>
              </div>
            </div>
            <!-- 硬币 -->
            <div class="user-coins-content">
              <div class="user-coins-container">
                <div class="user-coins-left">
                  <div class="coins-left-yb">
                    <i class="iconfont icon-icon_shipin_yingbishu" style="color:#00A1D6;"></i>
                    <span class="coins-total">418.0</span>
                  </div>
                  <div class="coins-left-bb">
                    <i class="iconfont icon-icon_dingdao_Bbi" style="color:#f3cb85;"></i>
                    <span class="Bcoins-total">0</span>
                  </div>
                </div>
                <div class="user-coins-right">
                  <div class="user-coins-email">
                    <div class="coins-tooltip coins-tooltip-left">
                      已绑定
                    </div>
                    <i class="iconfont icon-youxiang"></i>
                  </div>
                  <div class="user-coins-phone">
                    <div class="coins-tooltip coins-tooltip-right">
                      已绑定
                    </div>
                    <i class="iconfont icon-shouji1"></i>
                  </div>
                </div>
              </div>
            </div>
            <!-- 用户关注度 -->
            <div class="user-counts">
              <div class="user-counts-item" v-for="(item,index) in userCounts" :key="index">
                <div class="counts-item-col">{{item.title}}</div>
                <div class="counts-item-col">{{item.num}}</div>
              </div>
            </div>
            <!-- 个人中心 -->
            <div class="user-core-content">
              <div class="core-content-item" v-for="(item,index) in usercore" :key="index">
                <i :class="item.icon"></i>{{item.title}}
              </div>
            </div>
            <!-- 语言 -->
            <div class="user-lang-content">
              <div class="user-lang-title">
                <i class="iconfont icon-yuyan"></i>语言：{{userlang[userlangindex]}}
              </div>
              <div class="user-lang-switch">
                <div>
                  <div class="user-lang-item" v-for="(item,index) in userlang" :key="index" :class="{langactive:index == userlangindex}"
                    @click="langClick(index)">{{item}} <i class="iconfont icon-gou" v-show="userlangindex == index"></i></div>
                </div>
              </div>
            </div>
            <!-- 退出 -->
            <div class="user-logout">
              <div class="user-logout-item">
                <i class="iconfont icon-seriesfinale"></i>退出
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="userInfo-item" v-for="(item,index) in navUser" :key="index">{{item.title}}</div> -->
        <div class="userInfo-item user-content-show">大会员
          <div class="userInfo-center userInfo-center-vip">
            <div class="triangle userInfo-center-triangle"></div>
            <div class="user-vip-title">精彩推荐</div>
            <div class="user-vip-brief">
              <div class="user-vip-brief-img">
                <img src="../../assets/img/vip_banner.png" alt="">
              </div>
              <p class="user-vip-recommand">大会员可畅享各种专属内容，还有游戏礼包、个性装扮等你来拿~</p>
            </div>
            <div class="user-vip-btn">
              <button class="user-vip-button">续期大会员</button>
            </div>
          </div>
        </div>
        <div class="userInfo-item user-content-show">消息
          <span class="user-news-num">{{usernews[4].num}}</span>
          <div class="userInfo-center userInfo-center-news">
            <div class="triangle center-triangle-news"></div>
            <div class="user-news-item" v-for="(item,index) in usernews" :key="index">
              <span>{{item.title}}</span>
              <span v-if="item.num">{{item.num}}</span>
            </div>
          </div>
        </div>
        <div class="userInfo-item user-content-show">动态
          <span class="user-news-num">99+</span>
          <div class="userInfo-center userInfo-center-dynamic">
            <div class="triangle center-triangle-dynamic"></div>
            <div class="user-dynamic-bar">
              <div class="user-dynamic-bar-item" v-for="(item,index) in userdynamic" :key="index" :class="{dynamicactive:index == dynamicindex}"
                @click="dunamicClick(index)">{{index == dynamicindex ? item.title2 : item.title}}</div>
            </div>
            <!-- 视频动态 -->
            <div class="user-dynamic-container" v-show="dynamicindex == 0">
              <div class="user-dynamic-container-list">
                <div class="dynamic-list-item" v-for="(item,index) in videodynamic" :key="index">
                  <div class="dynamic-list-item-container">
                    <div class="item-container-left">
                      <div class="item-container-left-img" :title="item.name" :style="'background-image:url('+item.avatar+')'">
                        <div class="item-container-left-icon" :style="'background-image:url('+item.icon+')'"></div>
                      </div>
                    </div>
                    <div class="item-container-middle">
                      <div class="container-middle-container">
                        <span :title="item.name">{{item.name}}</span>
                        <span>{{item.time}}</span>
                      </div>
                      <div class="container-middle-container-title">{{item.title}}</div>
                    </div>
                    <div class="item-container-right">
                      <div class="item-container-right-img" :style="'background-image:url('+item.img+')'">
                        <div class="item-container-right-icon"><i class="iconfont icon-shaohouzaikanx1"></i></div>
                        <span class="item-container-right-text">稍后再看</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dynamic-more-btn">
                  <button class="dynamic-more-button">查看全部</button>
                </div>
              </div>
            </div>
            <!-- 直播动态 -->
            <div class="user-dynamic-container" v-show="dynamicindex == 1">
              <div class="user-dynamic-container-list">
                <div class="dynamic-list-item" v-for="(item,index) in livedynamic" :key="index">
                  <div class="dynamic-list-item-container">
                    <div class="item-container-left">
                      <div class="item-container-left-img" :title="item.name" :style="'background-image:url('+item.avatar+')'">
                      </div>
                    </div>
                    <div class="item-container-middle">
                      <div class="container-middle-container">
                        <span :title="item.name">{{item.name}}</span>
                        <span style="color:#fb7299">{{item.state}}</span>
                      </div>
                      <div class="container-middle-container-title">{{item.title}}</div>
                    </div>
                    <div class="item-container-right">
                      <div class="item-container-right-img" :style="'background-image:url('+item.img+')'">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dynamic-more-btn">
                  <button class="dynamic-more-button">查看全部</button>
                </div>
              </div>
            </div>
            <!-- 专栏动态 -->
            <div class="user-dynamic-container" v-show="dynamicindex == 2">
              <div class="user-dynamic-container-list">
                <div class="dynamic-list-item" v-for="(item,index) in specialdynamic" :key="index">
                  <div class="dynamic-list-item-container">
                    <div class="item-container-left">
                      <div class="item-container-left-img" :title="item.name" :style="'background-image:url('+item.avatar+')'">
                        <div class="item-container-left-icon" :style="'background-image:url('+item.icon+')'"></div>
                      </div>
                    </div>
                    <div class="item-container-middle">
                      <div class="container-middle-container">
                        <span :title="item.name">{{item.name}}</span>
                        <span>{{item.time}}</span>
                      </div>
                      <div class="container-middle-container-title">{{item.title}}</div>
                    </div>
                    <div class="item-container-right">
                      <div class="item-container-right-img" style="height: 48px;" :style="'background-image:url('+item.img+')'">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dynamic-more-btn">
                  <button class="dynamic-more-button">查看全部</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="userInfo-item user-content-show">收藏
          <div class="userInfo-center userInfo-center-collection">
            <div class="triangle center-triangle-collection"></div>
            <div class="collection-left-tabs">
              <div class="collection-tabs-item" v-for="(item,index) in collection" :key="index" :class="{collectionTabActive:index == collectionIndex}"
                @click="collectionClick(index)">
                <span :title="item.title">{{item.title}}</span>
                <span :class="{collectionSpanActive:index == collectionIndex}">{{collection[index].list.length}}</span>
              </div>
            </div>
            <div class="collection-left-videos" v-show="index == collectionIndex" v-for="(item,index) in collection"
              :key="index">
              <div class="collection-videos-list">
                <div class="collection-videos-list-item" v-for="(items,index2) in item.list" :key="index2">
                  <div class="collection-videos-left">
                    <div class="collection-videos-left-img">
                      <div class="coll-img-box">
                        <img :src="items.img" alt="">
                      </div>
                      <div class="coll-video-time">{{items.time}}</div>
                    </div>
                  </div>
                  <div class="collection-videos-right">
                    <div class="coll-video-title2" :title="items.title2">{{items.title2}}</div>
                    <div class="coll-video-name">
                      <span>{{items.name}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="coll-play-all">
                <div class="coll-play-left" v-if="index==0 || index==1 ? true : false">查看全部</div>
                <div class="coll-play-right"><i class="iconfont icon-bofang"></i>播放全部</div>
              </div>
            </div>
          </div>
        </div>
        <div class="userInfo-item user-content-show">历史
          <div class="userInfo-center userInfo-center-history">
            <div class="triangle center-triangle-history"></div>
            <div class="user-dynamic-bar">
              <div class="user-dynamic-bar-item" v-for="(item,index) in historylist" :key="index" :class="{dynamicactive:index == historyIndex}"
                @click="historyClick(index)">{{index == historyIndex ? item.title2 : item.title}}</div>
            </div>
            <div class="user-history-content" v-for="(item,index) in historylist" :key="index" v-show="index == historyIndex">
              <div class="user-history-daylist" v-for="(item2,index2) in item.content" :key="index2">
                <p class="user-history-day">{{item2.list[0].day}}</p>
                <div class="user-history-item" v-for="(item3,index3) in item2.list" :key="index3">
                  <!-- 左侧图 -->
                  <div class="user-history-item-left">
                    <div class="history-item-img">
                      <img :src="item3.img" alt="" :style="index == 2 ? 'width:81px' : ''">
                    </div>
                    <div class="history-item-speed" v-if="index==0">
                      <div :style="'width:'+item3.speed+'%'"></div>
                      <!-- <div></div> -->
                    </div>
                    <!-- 直播信息 -->
                    <div class="history-item-livestate" v-if="index==1" :style="item3.live == '直播中' ? 'background:#fb7299' : ''">{{item3.live}}</div>
                  </div>
                  <!-- 右侧标题信息 -->
                  <div class="user-history-item-right">
                    <div class="history-item-title">{{item3.title3}}</div>
                    <div class="history-item-videoinfo">
                      <div class="history-video-info">
                        <i :class="item3.icon"></i>
                        <span>{{item3.day}} {{item3.time}}</span>
                      </div>
                      <span>{{item3.name}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="history-more-btn" v-if="index==2?false:true">查看全部</div>
            </div>
          </div>
        </div>
        <div class="userInfo-item">创作中心</div>
        <div class="userInfo-contribute user-content-show">投稿
          <div class="userInfo-center userInfo-center-cont">
            <div class="triangle center-triangle-cont"></div>
            <div class="contr-container">
              <div class="contr-item" v-for="(item,index) in contribution" :key="index">
                <i :class="item.icon"></i>
                <span>{{item.title}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TopHeader',
    data() {
      return {
        // navLink:[
        //   {icon:'iconfont icon-bilibili-fill',title:'主站'},
        //   {icon:'',title:'番剧'},
        //   {icon:'',title:'游戏中心'},
        //   {icon:'',title:'直播'},
        //   {icon:'',title:'会员购'},
        //   {icon:'',title:'漫画'},
        //   {icon:'',title:'赛事'},
        //   {icon:'iconfont icon-shouji',title:'下载APP'},
        // ],
        rightImgIndex: -1, //游戏中心人物切换初始值
        navplaceholder: '成都AG击败DYG挺进总决赛',
        keyword: '',
        searchhistory: JSON.parse(localStorage.getItem('search_history')) || [], //搜索历史
        isShow: false, //搜索历史的显示隐藏
        gameList: [{
            img: require('../../assets/img/yxzx2.png'),
            name: ' 命运 - 冠 位指定（Fate/GO）'
          },
          {
            img: require('../../assets/img/yxzx2.png'),
            name: '碧蓝航线'
          },
          {
            img: require('../../assets/img/yxzx2.png'),
            name: '双生视界'
          }
        ],
        gameAll: [{
            name: '糖豆人：终极淘汰赛',
            img: require('../../assets/img/yxzx3.png')
          },
          {
            name: '心罪爱丽丝',
            img: require('../../assets/img/yxzx4.png')
          },
          {
            name: '掌门太忙',
            img: require('../../assets/img/yxzx3.png')
          },
          {
            name: '最强蜗牛',
            img: require('../../assets/img/yxzx4.png')
          },
          {
            name: '墨魂',
            img: require('../../assets/img/yxzx3.png')
          },
          {
            name: '代号：Onmyoji Idol Project',
            img: require('../../assets/img/yxzx4.png')
          },
          {
            name: '幻塔',
            img: require('../../assets/img/yxzx3.png')
          }
        ],
        liveHotList: [{
            img: require('../../assets/img/live_avatar.jpg'),
            name: '一个人的世界'
          },
          {
            img: require('../../assets/img/live_avatar.jpg'),
            name: '一个人的世界'
          },
          {
            img: require('../../assets/img/live_avatar.jpg'),
            name: '一个人的世界'
          },
          {
            img: require('../../assets/img/live_avatar.jpg'),
            name: '一个人的世界'
          },
          {
            img: require('../../assets/img/live_avatar.jpg'),
            name: '一个人的世界'
          },
          {
            img: require('../../assets/img/live_avatar.jpg'),
            name: '一个人的世界'
          }
        ],
        cartoonList: [{
            img: require('../../assets/img/cartoon_1.jpg'),
            name: '一拳超人'
          },
          {
            img: require('../../assets/img/cartoon_2.jpg'),
            name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~'
          },
          {
            img: require('../../assets/img/cartoon_3.jpg'),
            name: '刀剑神域 Alicization篇'
          },
          {
            img: require('../../assets/img/cartoon_4.jpg'),
            name: '租借女友'
          }
        ],
        cartoonRightList: [{
            img: require('../../assets/img/cartoon_right.jpg'),
            name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~'
          },
          {
            img: require('../../assets/img/cartoon_right.jpg'),
            name: '天官赐福'
          },
          {
            img: require('../../assets/img/cartoon_right2.jpg'),
            name: '鬼灭之刃'
          },
          {
            img: require('../../assets/img/cartoon_right.jpg'),
            name: '租借女友'
          },
          {
            img: require('../../assets/img/cartoon_right2.jpg'),
            name: '反派初始化'
          },
          {
            img: require('../../assets/img/cartoon_right.jpg'),
            name: '我的守护女友'
          }
        ],
        cartooncoverIndex: -1, //漫画右侧封面图初始值
        timer: null,
        // 用户信息
        userInfo: {
          name: '一个人的世界',
          vip: '年度大会员',
          gradenum: '5',
          exp: 19465,
          exptotal: 28800,
        },
        // 用户关注度
        userCounts: [{
            title: '关注',
            num: '185'
          },
          {
            title: '粉丝',
            num: '3'
          },
          {
            title: '动态',
            num: '1'
          }
        ],
        // 个人中心
        usercore: [{
            icon: 'iconfont icon-nickname',
            title: '个人中心'
          },
          {
            icon: 'iconfont icon-edit',
            title: '投稿管理'
          },
          {
            icon: 'iconfont icon-phonebill',
            title: 'B币钱包'
          },
          {
            icon: 'iconfont icon-instruction',
            title: '订单中心'
          },
          {
            icon: 'iconfont icon-conversation',
            title: '直播中心'
          },
          {
            icon: 'iconfont icon-privacy',
            title: '我的课程'
          }
        ],
        //语言
        userlangindex: 0,
        userlang: [
          '简体中文', '繁体中文'
        ],
        // 消息
        usernews: [{
            title: '回复我的',
            num: ''
          },
          {
            title: '@我的',
            num: ''
          },
          {
            title: '收到的赞',
            num: ''
          },
          {
            title: '系统通知',
            num: ''
          },
          {
            title: '我的消息',
            num: '6'
          },
        ],
        //动态
        dynamicindex: 0,
        userdynamic: [{
            title: '视频',
            title2: '视频动态'
          },
          {
            title: '直播',
            title2: '直播动态'
          },
          {
            title: '专栏',
            title2: '专栏动态'
          }
        ],
        // 视频动态
        videodynamic: [{
            avatar: require('../../assets/img/live_avatar.jpg'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: '哔哩哔哩英雄联盟赛事',
            time: '11分钟前',
            title: '【LPL夏季赛】7月1日 DMO vs IG',
            img: require('../../assets/img/videodync.png')
          },
          {
            avatar: require('../../assets/img/live_avatar.jpg'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: '哔哩哔哩英雄联盟赛事',
            time: '11分钟前',
            title: '【LPL夏季赛】7月1日 DMO vs IG',
            img: require('../../assets/img/videodync.png')
          },
          {
            avatar: require('../../assets/img/live_avatar.jpg'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_1.d53e8b68.svg',
            name: '哔哩哔哩英雄联盟赛事',
            time: '11分钟前',
            title: '【LPL夏季赛】7月1日 DMO vs IG',
            img: require('../../assets/img/videodync.png')
          },
          {
            avatar: require('../../assets/img/live_avatar.jpg'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_big.230767cd.svg',
            name: '哔哩哔哩英雄联盟赛事',
            time: '11分钟前',
            title: '【LPL夏季赛】7月1日 DMO vs IG',
            img: require('../../assets/img/videodync.png')
          },
          {
            avatar: require('../../assets/img/live_avatar.jpg'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: '哔哩哔哩英雄联盟赛事',
            time: '11分钟前',
            title: '【LPL夏季赛】7月1日 DMO vs IG',
            img: require('../../assets/img/videodync.png')
          },
          {
            avatar: require('../../assets/img/live_avatar.jpg'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: '哔哩哔哩英雄联盟赛事',
            time: '11分钟前',
            title: '【LPL夏季赛】7月1日 DMO vs IG',
            img: require('../../assets/img/videodync.png')
          },
          {
            avatar: require('../../assets/img/live_avatar.jpg'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: '哔哩哔哩英雄联盟赛事',
            time: '11分钟前',
            title: '【LPL夏季赛】7月1日 DMO vs IG',
            img: require('../../assets/img/videodync.png')
          },
          {
            avatar: require('../../assets/img/live_avatar.jpg'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_big.230767cd.svg',
            name: '哔哩哔哩英雄联盟赛事',
            time: '11分钟前',
            title: '【LPL夏季赛】7月1日 DMO vs IG',
            img: require('../../assets/img/videodync.png')
          },
          {
            avatar: require('../../assets/img/live_avatar.jpg'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: '哔哩哔哩英雄联盟赛事',
            time: '11分钟前',
            title: '【LPL夏季赛】7月1日 DMO vs IG',
            img: require('../../assets/img/videodync.png')
          },
          {
            avatar: require('../../assets/img/live_avatar.jpg'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_1.d53e8b68.svg',
            name: '哔哩哔哩英雄联盟赛事',
            time: '11分钟前',
            title: '【LPL夏季赛】7月1日 DMO vs IG',
            img: require('../../assets/img/videodync.png')
          },
        ],
        // 直播动态
        livedynamic: [{
            avatar: require('../../assets/img/live_avatar2.png'),
            name: '3号直播间',
            state: '正在直播',
            title: '哔哩哔哩音悦台',
            img: require('../../assets/img/live_img.png')
          },
          {
            avatar: require('../../assets/img/live_avatar2.png'),
            name: '3号直播间',
            state: '正在直播',
            title: '哔哩哔哩音悦台',
            img: require('../../assets/img/live_img.png')
          },
          {
            avatar: require('../../assets/img/live_avatar2.png'),
            name: '3号直播间',
            state: '正在直播',
            title: '哔哩哔哩音悦台',
            img: require('../../assets/img/live_img.png')
          },
          {
            avatar: require('../../assets/img/live_avatar2.png'),
            name: '3号直播间',
            state: '正在直播',
            title: '哔哩哔哩音悦台',
            img: require('../../assets/img/live_img.png')
          },
          {
            avatar: require('../../assets/img/live_avatar2.png'),
            name: '3号直播间',
            state: '正在直播',
            title: '哔哩哔哩音悦台',
            img: require('../../assets/img/live_img.png')
          },
          {
            avatar: require('../../assets/img/live_avatar2.png'),
            name: '3号直播间',
            state: '正在直播',
            title: '哔哩哔哩音悦台',
            img: require('../../assets/img/live_img.png')
          },
          {
            avatar: require('../../assets/img/live_avatar2.png'),
            name: '3号直播间',
            state: '正在直播',
            title: '哔哩哔哩音悦台',
            img: require('../../assets/img/live_img.png')
          },
          {
            avatar: require('../../assets/img/live_avatar2.png'),
            name: '3号直播间',
            state: '正在直播',
            title: '哔哩哔哩音悦台',
            img: require('../../assets/img/live_img.png')
          },
          {
            avatar: require('../../assets/img/live_avatar2.png'),
            name: '3号直播间',
            state: '正在直播',
            title: '哔哩哔哩音悦台',
            img: require('../../assets/img/live_img.png')
          },
          {
            avatar: require('../../assets/img/live_avatar2.png'),
            name: '3号直播间',
            state: '正在直播',
            title: '哔哩哔哩音悦台',
            img: require('../../assets/img/live_img.png')
          },
        ],
        // 专栏动态
        specialdynamic: [{
            avatar: require('../../assets/img/special_avatar.png'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: 'Steam每日中国特惠资讯',
            time: '06-26',
            title: 'TOP150史低汇总（Steam夏促特惠篇）',
            img: require('../../assets/img/special_img.png')
          },
          {
            avatar: require('../../assets/img/special_avatar.png'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: 'Steam每日中国特惠资讯',
            time: '06-26',
            title: 'TOP150史低汇总（Steam夏促特惠篇）',
            img: require('../../assets/img/special_img.png')
          },
          {
            avatar: require('../../assets/img/special_avatar.png'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: 'Steam每日中国特惠资讯',
            time: '06-26',
            title: 'TOP150史低汇总（Steam夏促特惠篇）',
            img: require('../../assets/img/special_img.png')
          },
          {
            avatar: require('../../assets/img/special_avatar.png'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: 'Steam每日中国特惠资讯',
            time: '06-26',
            title: 'TOP150史低汇总（Steam夏促特惠篇）',
            img: require('../../assets/img/special_img.png')
          },
          {
            avatar: require('../../assets/img/special_avatar.png'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: 'Steam每日中国特惠资讯',
            time: '06-26',
            title: 'TOP150史低汇总（Steam夏促特惠篇）',
            img: require('../../assets/img/special_img.png')
          },
          {
            avatar: require('../../assets/img/special_avatar.png'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: 'Steam每日中国特惠资讯',
            time: '06-26',
            title: 'TOP150史低汇总（Steam夏促特惠篇）',
            img: require('../../assets/img/special_img.png')
          },
          {
            avatar: require('../../assets/img/special_avatar.png'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: 'Steam每日中国特惠资讯',
            time: '06-26',
            title: 'TOP150史低汇总（Steam夏促特惠篇）',
            img: require('../../assets/img/special_img.png')
          },
          {
            avatar: require('../../assets/img/special_avatar.png'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: 'Steam每日中国特惠资讯',
            time: '06-26',
            title: 'TOP150史低汇总（Steam夏促特惠篇）',
            img: require('../../assets/img/special_img.png')
          },
          {
            avatar: require('../../assets/img/special_avatar.png'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: 'Steam每日中国特惠资讯',
            time: '06-26',
            title: 'TOP150史低汇总（Steam夏促特惠篇）',
            img: require('../../assets/img/special_img.png')
          },
          {
            avatar: require('../../assets/img/special_avatar.png'),
            icon: 'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg',
            name: 'Steam每日中国特惠资讯',
            time: '06-26',
            title: 'TOP150史低汇总（Steam夏促特惠篇）',
            img: require('../../assets/img/special_img.png')
          }
        ],
        // 收藏
        collectionIndex: 0,
        collection: [{
            title: '默认收藏夹',
            list: [{
                img: require('../../assets/img/default_img3.png'),
                time: '24:20',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img3.png'),
                time: '16P',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '24:20',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/default_img3.png'),
                time: '11P',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img3.png'),
                time: '24:20',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img3.png'),
                time: '24:20',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '24:20',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/default_img3.png'),
                time: '22P',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img3.png'),
                time: '24:20',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '10P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/default_img3.png'),
                time: '24:20',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img3.png'),
                time: '24:20',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              }
            ],
          },
          {
            title: '稍后再看',
            list: [{
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '最强法海',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【老番茄】史上最骚公鹿',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '把火影的忍术翻译成中文谐音之后，简直不要太沙雕。',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '把火影的忍术翻译成中文谐音之后，简直不要太沙雕。',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              }
            ],
          },
          {
            title: '新海诚',
            list: [{
                img: require('../../assets/img/default_img.png'),
                time: '24:20',
                title2: '【日本】新海诚新作《天气之子》预告片（二）【中字】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: '【日本】新海诚新作《天气之子》预告片（二）【中字】',
                name: '一个人的世界'
              },
            ],
          },
          {
            title: '我的编程之路',
            list: [{
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
            ],
          },
          {
            title: '人生？',
            list: [{
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
            ],
          },
          {
            title: '泪目项',
            list: [{
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
            ],
          },
          {
            title: '公主殿下',
            list: [{
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
            ],
          },
          {
            title: '炸了',
            list: [{
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
            ],
          },
          {
            title: '永不完结银他妈',
            list: [{
                img: require('../../assets/img/ytm.png'),
                time: '156P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/ytm.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/ytm.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/ytm.png'),
                time: '156P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/ytm.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/cartoon_2.jpg'),
                time: '156P',
                title2: '【CS公开课】计算机程序的构造和解释（SICP）【中英字幕】【FoOTOo&HITPT&Learning-SICP】',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/ytm.png'),
                time: '16P',
                title2: 'B站最好的MySQL性能调优面试视频教程全集',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
            ],
          },
          {
            title: '木下',
            list: [{
                img: require('../../assets/img/ytm.png'),
                time: '156P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
            ],
          },
          {
            title: '全程高能',
            list: [{
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '最强法海',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【老番茄】史上最骚公鹿',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/ytm.png'),
                time: '156P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
            ],
          },
          {
            title: '中二',
            list: [{
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '最强法海',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【老番茄】史上最骚公鹿',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/ytm.png'),
                time: '156P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img.png'),
                time: '16P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '把火影的忍术翻译成中文谐音之后，简直不要太沙雕。',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              }
            ],
          },
          {
            title: '凛冽时雨',
            list: [{
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '最强法海',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【老番茄】史上最骚公鹿',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/ytm.png'),
                time: '156P',
                title2: '【魂】银魂——武士之魂',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/invalid_img.png'),
                time: '16P',
                title2: '已失效的视频',
                name: 'ilovecoding'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '把火影的忍术翻译成中文谐音之后，简直不要太沙雕。',
                name: '一个人的世界'
              },
              {
                img: require('../../assets/img/default_img2.png'),
                time: '',
                title2: '【公主连结】拒绝无脑卡R7！所有角色R7R8优劣详细分析！这就是干货！',
                name: '一个人的世界'
              }
            ],
          },
        ],
        // 历史
        historyIndex: 0,
        historylist: [{
            title: '视频',
            title2: '视频历史',
            content: [{
              list: [{
                  day: '今天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '80'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '50'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '90'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '30'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '28'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '16'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '74'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '69'
                },
              ],
            }, {
              list: [{
                  day: '昨天',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '78'
                },
                {
                  day: '昨天',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '46'
                },
                {
                  day: '昨天',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '33'
                },
                {
                  day: '昨天',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '50'
                },
                {
                  day: '昨天',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '42'
                },
                {
                  day: '昨天',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '96'
                },
                {
                  day: '昨天',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  speed: '80'
                },
              ]
            }]
          },
          {
            title: '直播',
            title2: '直播历史',
            content: [{
              list: [{
                  day: '今天',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '直播中'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '直播中'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '直播中'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '未开播'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '直播中'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '直播中'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '未开播'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '直播中'
                },
              ],
            }, {
              list: [{
                  day: '更早',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '直播中'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '未开播'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '直播中'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '未开播'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '直播中'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '直播中'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯',
                  live: '未开播'
                },
              ]
            }],
          },
          {
            title: '专栏',
            title2: '专栏历史',
            content: [{
              list: [{
                  day: '今天',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '今天',
                  img: require('../../assets/img/default_img.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
              ],
            }, {
              list: [{
                  day: '昨天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '昨天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '昨天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '昨天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '昨天',
                  img: require('../../assets/img/default_img3.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
              ],
            }, {
              list: [{
                  day: '更早',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【唐唐】最坏的前男友 唐唐爆笑神吐槽悬疑片《隐形人》',
                  icon: 'iconfont icon-shouji3',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
                {
                  day: '更早',
                  img: require('../../assets/img/default_img2.png'),
                  title3: '【STEAM每日情报】免费获取《赛博朋克2077额外物品包》+腾讯在北美创建3A级工作室',
                  icon: 'iconfont icon-pc',
                  time: '21:08',
                  name: 'YXECG游戏资讯'
                },
              ]
            }],
          }
        ],
        // 投稿
        contribution: [{
            icon: 'iconfont icon-tougao1',
            title: '专栏投稿'
          },
          {
            icon: 'iconfont icon-tougao1',
            title: '音频投稿'
          },
          {
            icon: 'iconfont icon-tougao1',
            title: '视频投稿'
          },
          {
            icon: 'iconfont icon-tougao1',
            title: '投稿管理'
          },
        ],
        navUser: [{
            title: '大会员'
          },
          {
            title: '消息'
          },
          {
            title: '动态'
          },
          {
            title: '收藏'
          },
          {
            title: '历史'
          },
          {
            title: '创作中心'
          },
        ]
      }
    },
    methods: {
      //输入框
      inpfocus() {
        const _this = this
        if (this.searchhistory == '') {
          _this.isShow = false
        } else {
          this.isShow = true
        }
        document.onclick = function() {
          _this.isShow = false

        }
      },
      // 搜索
      search() {
        if (this.keyword == '') {
          this.keyword = this.navplaceholder
        }
        let searchHistory = {
          name: this.keyword
        }
        this.searchhistory.push(searchHistory)
        localStorage.setItem('search_history', JSON.stringify(this.searchhistory))
      },
      // 删除历史搜索
      delecthistory(index) {
        this.searchhistory.splice(index, 1)
        if (this.searchhistory == '') {
          this.isShow = false
        }
        localStorage.setItem('search_history', JSON.stringify(this.searchhistory))
      },
      // 游戏
      gameEnter(index) {
        this.rightImgIndex = index
      },
      gameLeave() {
        this.rightImgIndex = -1
      },
      // 漫画
      cartoonEnter(index) {
        this.cartooncoverIndex = index
      },
      cartoonLeave() {
        this.cartooncoverIndex = -1
      },
      AvatarImgEnter() {
        this.$refs.userInfoCoreAvatar.style.cssText = 'transform: translateX(-50%) scale(1);'
        this.$refs.userInfoCore.classList.add('userInfo-coreHover')
      },
      // 个人中心头像
      // coreEnter() {
      //   clearTimeout(this.timer)
      //   this.$refs.userInfoAvatarImg.classList.add('userInfo-avatar-imgHover')
      //   this.$refs.userInfoCoreAvatar.style.cssText = 'transform: translateX(-50%) scale(1);'
      // },
      // coreLeave() {
      //   const _this = this
      //   this.timer = setTimeout(function(){
      //     _this.$refs.userInfoAvatarImg.classList.remove('userInfo-avatar-imgHover')
      //     _this.$refs.userInfoCore.classList.remove('userInfo-coreHover')
      //     _this.$refs.userInfoCoreAvatar.style.cssText = 'transform: translateX(-50%) scale(0.5);'
      //   },30)
      // },
      // 个人中心头像
      coreEnter() {
        clearTimeout(this.timer)
        this.$refs.userInfoAvatarImg.classList.add('userInfo-avatar-imgHover')
      },
      coreLeave() {
        const _this = this
        this.timer = setTimeout(function() {
          _this.$refs.userInfoAvatarImg.classList.remove('userInfo-avatar-imgHover')
        }, 200)
      },
      // 语言
      langClick(index) {
        this.userlangindex = index
      },
      // 动态
      dunamicClick(index) {
        this.dynamicindex = index
      },
      // 收藏
      collectionClick(index) {
        this.collectionIndex = index
      },
      // 历史
      historyClick(index) {
        this.historyIndex = index
      }
    },
    mounted() {

    },
    watch: {

    }
  }
</script>

<style scoped>
  .top-header {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /* background: red; */
    height: 56px;
    z-index: 1;
  }

  .top-header-content {
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    /* line-height: 30px; */
  }

  .top-nav-link {
    box-sizing: border-box;
  }

  .top-nav-link>ul {
    display: flex;
    height: 36px;
    font-size: 14px !important;
    align-items: center;
    color: #fff;
  }

  .top-nav-link>ul>li {
    margin-right: 13px;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
  }

  /* 小三角 */
  .triangle {
    position: absolute;
    left: 60px;
    top: -14px;
    width: 0;
    height: 0;
    border: 7px solid;
    border-color: transparent transparent #FFFFFF;
  }

  /* 导航栏游戏中心 */
  .game-centre {
    position: absolute;
    /* bottom:-270px; */
    top: 35px;
    left: -40px;
    width: 466px;
    height: 256px;
    opacity: 0;
    visibility: hidden;
    /*控制元素是否可见*/
    transform: translateY(-5%);
    transition: all .2s ease-in .3s;
    background-color: #FFFFFF;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
    display: flex;
    justify-content: flex-start;
    z-index: 2020;
  }

  .nav-link-game:hover .game-centre {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .game-left {
    width: 265px;
    margin-top: 12px;
  }

  .game-left-banner {
    width: 240px;
    height: 128px;
    margin-left: 12px;
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
  }

  .game-left-banner>img {
    width: 100%;
    height: 100%;
  }

  .game-left-banner>span {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 10px;
    width: 220px;
    /* height: 30px; */
    line-height: 30px;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    font-size: 13px;
    background: url(../../assets/img/yxzx_title_bg.png) repeat-x;
  }

  .game-left-list {
    margin-top: 6px;
    display: flex;
  }

  .game-left-list>.game-list-item {
    width: 64px;
    height: 104px;
    padding: 6px 12px 0 12px;
    transition: background-color .2s;
  }

  .game-list-item:hover {
    background-color: #e5e9ef;
  }

  .game-left-list>.game-list-item>img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }

  .game-left-list>.game-list-item>span {
    width: 4em;
    display: block;
    color: #222;
    text-align: center;
    overflow: hidden;
    margin: 8px auto;
    font-size: 14px;
    height: 14px;
    line-height: 1;
  }

  .game-right {
    width: 201px;
    min-height: 234px;
    margin-top: 12px;
    background: url(../../assets/img/line.png) no-repeat;
  }

  .game-right>.game-right-all {
    padding: 35px 0 0 6px;
    background: url(../../assets/img/title.png) no-repeat;
  }

  .game-right>.game-right-all>.right-all-item {
    padding-left: 16px;
    font-size: 12px;
    line-height: 28px;
    color: #222222;
    transition: all .2s;
  }

  .game-right>.game-right-all>.right-all-item:hover {
    color: #00A1D6;
    background-color: #e5e9ef;
  }

  .game-right>.game-right-all>.right-all-item>span {
    width: 13em;
    height: 28px;
    display: block;
    overflow: hidden;
  }

  .game-right-img {
    position: absolute;
    left: 442px;
    bottom: 0;
    width: 220px;
    height: 220px;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 导航栏直播 */
  .live-center {
    width: 504px;
    height: auto;
    padding-left: 20px;
    display: flex;
  }

  .live-center>.triangle {
    left: 46px;
  }

  .live-center>.live-hot {
    width: 254px;
    margin: 20px 0 20px 0px;
    /* overflow: hidden; */
  }

  .live-center>.live-hot>.live-hot-title {
    font-size: 14px;
    color: #ea759f;
  }

  .live-center>.live-hot>.live-hot-list {
    /* width: 253px; */
    font-size: 12px;
    margin-top: 5px;
    border-right: 1px solid #eaeaea;
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    /* word-break:normal; */
  }

  .live-center>.live-hot>.live-hot-list>.live-hot-item {
    width: 64px;
    /* display: inline-block; */
    height: auto;
    margin: 10px 17px 0 0;
    position: relative;
  }

  .live-center>.live-hot>.live-hot-list>.live-hot-item>.liveHot-item-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
  }

  .live-center>.live-hot>.live-hot-list>.live-hot-item>.liveHot-item-hover {
    position: absolute;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-indent: 22px;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    transform: scale(0);
    opacity: 0;
    transition: all .2s;
  }

  .live-center>.live-hot>.live-hot-list>.live-hot-item>.liveHot-item-hover::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 25px;
    width: 12px;
    height: 12px;
    background: #ff699e;
    border-radius: 50%;

  }

  .live-center>.live-hot>.live-hot-list>.live-hot-item:hover .liveHot-item-hover {
    transform: scale(1);
    opacity: 1;
  }

  .live-center>.live-hot>.live-hot-list>.live-hot-item>.liveHot-item-name {
    color: #222;
    margin: 3px 0 0;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* nav漫画 */
  .cartoon-canter {
    width: 520px;
    height: auto;
    padding-left: 20px;
    display: flex;
    box-sizing: border-box;
  }

  .cartoon-canter>.triangle {
    left: 47px;
  }

  .cartoon-canter>.cartoon-left {
    width: 292px;
    margin: 20px 20px 0 0;
    box-sizing: border-box;
    vertical-align: top;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .cartoon-left-item {
    position: relative;
    margin-bottom: 20px;
  }

  .cartoon-left-item:nth-of-type(2n - 1) {
    margin-right: 20px;
  }

  .cartoon-left-item::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #f4f4f4;
    z-index: -1;
    transform: scale(1.15);
    border-radius: 2px;
    display: none;
  }

  .cartoon-left-item:hover::after {
    display: block;
  }

  .cartoonLeft-item-relative {
    position: relative;
    z-index: 2020;
  }

  .cartoonLeft-item-imgbox {
    width: 136px;
    height: 77px;
  }

  .cartoonLeft-item-img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .cartoonLeft-item-name {
    max-width: 136px;
    margin-top: 6px;
    font-size: 13px;
    color: rgba(0, 0, 0, .87);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .cartoon-middle {
    width: 1px;
    background: rgba(0, 0, 0, .1);
    margin: 20px 0;
  }

  .cartoon-right {
    /* width: 187px; */
    height: auto;
    margin: 20px 0;
  }

  .cartoon-right-title {
    margin-left: 20px;
    font-size: 16px;
    color: #1c1d1f;
  }

  .cartoon-right-list {
    margin-top: 8px;
    font-size: 13px;
    line-height: 2.6;
  }

  .cartoon-right-item {
    box-sizing: border-box;
    width: 187px;
    padding: 0 20px;
    color: #1c1d1f;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .cartoon-right-item:hover {
    background-color: #F4F4F4;
  }

  .cartoon-right-item>span:nth-child(1) {
    color: #cf9870;
    margin-right: 10px;
  }

  .cartoon-cover {
    position: absolute;
    width: 160px;
    height: 213px;
    right: -150px;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 4px;
    box-shadow: 0 0px 6px rgba(0, 0, 0, .16);
  }

  /* navapp下载 */
  .app-download {
    width: 280px;
    height: 212px;
    background: url(../../assets/img/app_download.png) no-repeat center;
    background-size: cover;
    box-shadow: none;
    left: -100px;
  }

  .app-download>.triangle {
    left: 133px;
    top: -11px;
  }

  .hot-events {
    width: 250px;
    margin: 20px 0;
    /* padding-left: 20px; */
  }

  .hot-events>.hot-events-title {
    font-size: 14px;
    color: #ea759f;
    padding-left: 21px;
  }

  .hot-events>.hot-events-item {
    padding: 10px 21px;
    width: 208px;
    height: 80px;
    margin-top: 5px;
  }

  .hot-events>.hot-events-item:hover {
    background-color: #EAEAEA;
  }

  .hot-events>.hot-events-item>img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }

  .top-nav-link>ul>li>i {
    margin-right: 3px;
    font-size: 18px;
    vertical-align: middle
  }

  .top-nav-link>ul>li>.iconapp {
    margin-right: 0 !important;
  }

  .top-nav-search {
    /* width: 34%; */
    width: 500px;
    margin: 0 10px;
  }

  .nav-search {
    position: relative;
  }

  .nav-search>form {
    height: 36px;
    padding: 0 40px 0 15px;
    background: #fff;
    border-radius: 2px;
  }

  .nav-search>form>input {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    border: none;
    /* color:#999; */
    overflow: hidden;
    line-height: 36px;
    font-size: 14px;
    background-color: transparent;
  }

  .nav-search-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #e7e7e7;
    /* border-top-right-radius: 2px;
    border-bottom-right-radius: 2px; */
    border-radius: 2px;
    cursor: pointer;
  }

  .nav-search-btn>i {
    font-weight: bold;
  }

  .nav-search-btn:hover {
    color: rgb(0, 161, 214) !important;
  }

  .nav-search-history {
    width: 100%;
    /* height:200px; */
    background: #fff;
    margin-top: 1px;
    border-radius: 2px;
    position: absolute;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
    padding: 10px 0;
    font-size: 16px;
  }

  .nav-search-history>li {
    height: 32px;
    line-height: 20px;
    padding: 6px 10px 6px 16px;
    display: flex;
    justify-content: space-between;
    color: #222222;
    box-sizing: border-box;
    transition: all .2s;
    cursor: pointer;
  }

  .nav-search-history>li>i {
    color: #b9b6b6;
    font-size: 14px;
    transition: color .2s;
  }

  .nav-search-history>li:hover {
    background-color: rgba(224, 221, 221, .4);
  }

  .nav-search-history>li>i:hover {
    color: #00a1d6;
  }

  .top-nav-userInfo {
    width: 454px;
    display: flex;
    /* justify-content: space-between; */
    height: 36px;
    font-size: 14px !important;
    align-items: center;
    color: #fff;
  }

  .top-nav-userInfo>div {
    /* cursor: pointer; */
  }

  .top-nav-userInfo>.userInfo-avatar {
    width: 46px;
    height: 100%;
    position: relative;
  }

  /* 用户中心 */
  .userInfo-core {
    position: absolute;
    width: 280px;
    min-height: 492px;
    background: #FFFFFF;
    left: -122px;
    top: 45px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2%);
    /* transition: all 0.2s .2s; */
    transition: all .17s ease-in-out .2s;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, .2);
    z-index: 2020;
    color: #212121;
  }

  .userInfo-avatar-img {
    position: absolute;
    width: 36px;
    height: 100%;
    border-radius: 50%;
    background: url(../../assets/img/avatar.jpg) no-repeat center;
    background-size: cover;
    cursor: pointer;
    margin-right: 10px;
    opacity: 1;
    visibility: visible;
    /* transition: all 0.18s ease-in .2s; */
    transition: all .15s .15s;
  }

  .userInfo-avatar-img:hover {
    transform: translateY(7px) scale(1.1);
    opacity: 0;
  }

  .userInfo-avatar-imgHover {
    transform: translateY(7px) scale(1.1);
    opacity: 0;
  }

  .userInfo-avatar-img:hover+.userInfo-core {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .userInfo-core:hover {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  /* .userInfo-coreHover{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  } */
  .userInfo-core-avatar {
    width: 80px;
    height: 80px;
    background: url(../../assets/img/avatar.jpg) no-repeat center;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: -8%;
    /* transform: translateX(-50%) scale(0.5); */
    transform: translateX(-50%) scale(1);
    border-radius: 50%;
    transition: all 0.2s ease-in-out 0s;
    cursor: pointer;
  }

  /* .userInfo-core-avatarHover{
    transform: scale(1);
  } */
  .userInfo-core-avatar::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background: url(http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_big.230767cd.svg) no-repeat center;
    background-size: cover;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    right: 0;
    bottom: 0px;
  }

  /* 用户昵称 */
  .userInfo-name {
    padding-top: 42px;
    color: rgba(251, 114, 153);
    font-weight: 600;
    text-align: center;
    font-size: 16px;
  }

  .userInfo-vip {
    margin-top: 4px;
    text-align: center;
    font-size: 12px;
    color: #fff;
  }

  .userInfo-vip>span {
    background-color: #fb7299;
    display: inline-block;
    width: 66px;
    border-radius: 2px;
    cursor: pointer;
  }

  /* 用户等级 */
  .userInfo-level-content {
    align-items: center;
    position: relative;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .userInfo-level-info {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 5px 0;
  }

  .userInfo-level-info>span:nth-child(1) {
    font-size: 14px;
    color: #212121;
  }

  .userInfo-level-info>span:nth-child(2) {
    font-size: 12px;
    color: #999999;
  }

  .userInfo-exper-content {
    width: 240px;
    height: 10px;
    cursor: pointer;
    padding: 4px 0;
    box-sizing: border-box;
  }

  .userInfo-exper-bar {
    width: 240px;
    height: 2px;
    background-color: #f4f4f4;
    /* margin: 4px 0; */
    position: relative;
  }

  .userInfo-exper-progress {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f3cb85;
    border-radius: 2px;
    height: 2px;
    width: 80%;
  }

  /* 右侧等级提示 */
  .level-intro-right {
    position: absolute;
    background: #FFFFFF;
    width: 240px;
    left: 279px;
    top: -20px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .2);
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    padding: 15px;
    font-size: 14px;
    color: #212121;
    border-radius: 2px;
    transition: all .3s;
  }

  .userInfo-level-content:hover .level-intro-right {
    visibility: visible;
    opacity: 1;
  }

  .intro-header-text {
    margin-bottom: 12px;
  }

  .intro-middle {
    margin-bottom: 14px;
  }

  .intro-bottom {
    color: #00a1d6;
    cursor: pointer;
    align-items: center;
  }

  .intro-bottom>i {
    font-size: 18px;
    vertical-align: middle;
    /*设置行内样式居中*/
  }

  /* 硬币 */
  .user-coins-content {
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #F4F4F4;
    padding: 14px 20px;
  }

  .user-coins-container,
  .user-coins-left,
  .user-coins-right {
    display: flex;
    justify-content: space-between;
  }

  .user-coins-left i,
  .user-coins-right i {
    font-size: 22px;
  }

  .coins-left-yb,
  .coins-left-bb {
    display: flex;
    align-items: center;
  }

  .coins-left-yb>span,
  .coins-left-bb>span {
    margin: 0 20px 0 5px;
    cursor: pointer;
  }

  .coins-left-yb:hover .coins-total {
    color: #00a1d6;
  }

  .coins-left-bb:hover .Bcoins-total {
    color: #00a1d6;
  }

  .user-coins-right i {
    color: #00a1d6;
    margin-left: 7px;
    cursor: pointer;
  }

  .user-coins-email,
  .user-coins-phone {
    position: relative;
  }

  .coins-tooltip {
    position: absolute;
    font-size: 12px;
    /* width: 50px; */
    box-sizing: border-box;
    padding: 0 6px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    top: 2px;
    color: #222;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
  }

  .coins-tooltip-left {
    right: 30px;
  }

  .coins-tooltip-left::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-left: 6px solid #ccc;
    border-bottom: 4px solid transparent;
    right: -6px;
    top: 5px;
  }

  .coins-tooltip-right {
    left: 37px;
  }

  .coins-tooltip-right::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-right: 6px solid #ccc;
    border-bottom: 4px solid transparent;
    left: -6px;
    top: 5px;
  }

  .user-coins-email:hover .coins-tooltip-left {
    opacity: 1;
    visibility: visible;
  }

  .user-coins-phone:hover .coins-tooltip-right {
    opacity: 1;
    visibility: visible;
  }

  /* 用户关注度 */
  .user-counts {
    width: 100%;
    height: 58px;
    box-sizing: border-box;
    border-bottom: 1px solid #F4F4F4;
    display: flex;
    align-items: center;
    /*Y轴居中*/
    justify-content: space-between;
    text-align: center;
  }

  .user-counts>.user-counts-item {
    flex: 1;
    cursor: pointer;
  }

  .user-counts>.user-counts-item>div:nth-child(1) {
    font-size: 12px;
    color: #999999;
    transition: all .2s;
  }

  .user-counts>.user-counts-item>div:nth-child(2) {
    color: #212121;
    font-weight: 600;
    font-size: 16px;
    transition: all .2s;
  }

  .user-counts>.user-counts-item:hover .counts-item-col {
    color: #00a1d6;
  }

  /* 个人中心 */
  .user-core-content {
    width: 100%;
    border-bottom: 1px solid #F4F4F4;
    padding: 7px 0;
    box-sizing: border-box;
  }

  .core-content-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px 23px;
    font-size: 14px;
    color: #212121;
    transition: all .3s;
  }

  .core-content-item:hover {
    background-color: #F4F4F4;
  }

  .core-content-item>i {
    font-size: 24px;
    vertical-align: middle;
    color: #979797;
    margin-right: 5px;
  }

  /* 语言 */
  .user-lang-content {
    width: 100%;
    padding: 7px 0;
    border-bottom: 1px solid #f4f4f4;
    font-size: 14px;
    /* box-sizing: border-box; */
    position: relative;
  }

  .user-lang-title {
    cursor: pointer;
    padding: 8px 23px;
    display: flex;
    align-items: center;
    transition: all .3s;
  }

  .user-lang-title>i {
    font-size: 18px;
    vertical-align: middle;
    color: #979797;
    margin: 0 8px 0 3px;
  }

  .user-lang-title:hover {
    background-color: #F4F4F4;
  }

  .user-lang-switch {
    position: absolute;
    padding: 8px 0;
    top: 0px;
    width: 240px;
    left: 279px;
    background-color: #FFFFFF;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .2);
    border-radius: 2px;
    font-size: 12px;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
  }

  .user-lang-item {
    font-size: 14px;
    padding: 8px 15px;
    line-height: 22px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    transition: all .3s;
  }

  .user-lang-item>i {
    font-weight: 600;
    color: #00A1D6;
  }

  .langactive {
    color: #00A1D6;
  }

  .user-lang-item:hover {
    background: #F4F4F4;
  }

  .user-lang-content:hover .user-lang-switch {
    opacity: 1;
    visibility: visible;
  }

  /* 退出 */
  .user-logout {
    font-size: 14px;
    color: #212121;
    padding: 7px 0;
  }

  .user-logout-item {
    display: flex;
    align-items: center;
    padding: 8px 23px;
    cursor: pointer;
    transition: all .3s;
  }

  .user-logout-item>i {
    font-size: 24px;
    vertical-align: middle;
    color: #979797;
    margin-right: 5px;
  }

  .user-logout-item:hover {
    background-color: #F4F4F4;
  }

  /* 大会员 */
  .top-nav-userInfo>.userInfo-item {
    position: relative;
    margin-left: 14px;
    white-space: nowrap;
    cursor: pointer;
  }

  .top-nav-userInfo>.userInfo-contribute {
    width: 100px;
    height: 36px;
    line-height: 36px;
    background-color: #fb7299;
    border-radius: 2px;
    text-align: center;
    position: relative;
    margin-left: 14px;
    cursor: pointer;
  }

  .userInfo-center {
    position: absolute;
    /* bottom:-270px; */
    top: 35px;
    left: -109px;
    width: 260px;
    height: 256px;
    opacity: 0;
    visibility: hidden;
    /*控制元素是否可见*/
    transform: translateY(-5%);
    transition: all .2s ease-out .3s;
    background-color: #FFFFFF;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
    /* display: flex;
    justify-content: flex-start; */
    z-index: 2020;
    box-sizing: border-box;
    color: #212121;
    white-space: pre-line
  }

  .user-content-show:hover .userInfo-center {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
  }

  .userInfo-center-triangle {
    left: 124px;
  }

  /* 大会员 */
  .userInfo-center-vip {
    padding: 15px;
    height: auto;
  }

  .user-vip-title {
    font-weight: 900;
    margin: 5px 0 12px 0;
  }

  .user-vip-brief {
    margin-bottom: 7px;
  }

  .user-vip-brief-img {
    width: 230px;
    height: 68px;
    background-color: #ccc;
  }

  .user-vip-brief-img>img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }

  .user-vip-recommand {
    margin-top: 10px;
    font-size: 14px;
    color: #222;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 18px;
  }

  .user-vip-btn {
    margin-top: 20px;
    text-align: center;
  }

  .user-vip-btn>button {
    width: 160px;
    height: 32px;
    background: #00A1D6;
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
  }

  .user-vip-button:hover {
    background: #00b5e5;
  }

  /* 消息 */
  .user-news-num {
    position: absolute;
    min-width: 16px;
    /* width: 16px; */
    height: 16px;
    border-radius: 8px;
    right: -10px;
    top: -10px;
    background-color: #fa5a57;
    color: #FFFFFF;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    padding: 0 3px;
    box-sizing: border-box;
  }

  .userInfo-center-news {
    width: 172px;
    left: -72px;
    padding: 10px 0;
    height: auto;
  }

  .center-triangle-news {
    left: 80px;
  }

  .user-news-item {
    padding: 0 20px;
    height: 36px;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .user-news-item:hover {
    background-color: #f4f4f4;
  }

  .user-news-item>span:nth-child(2) {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    background: #fa5a57;
    border-radius: 8px;
    line-height: 16px;
    text-align: center;
    color: #FFFFFF;
    font-size: 12px;
    padding: 0 4px;
    box-sizing: border-box;
  }

  /* 动态 */
  .userInfo-center-dynamic {
    width: 370px;
    left: -171px;
    height: auto;
  }

  .center-triangle-dynamic {
    left: 179px;
  }

  .user-dynamic-bar {
    padding-left: 20px;
    display: flex;
    font-size: 12px;
    color: #999;
    line-height: 16px;
    height: 48px;
    border-bottom: 1px solid #E7E7E7;
    user-select: none;
    align-items: center;
  }

  .dynamicactive {
    background: #00A1D6;
    color: #fff;
    padding: 4px 10px;
    margin: 0 14px 0 -10px;
  }

  .user-dynamic-bar-item {
    margin: 0 20px 0 0;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    transition: all .3s ease;
    z-index: 1;
  }

  .user-dynamic-container {
    min-height: 120px;
    max-height: 469px;
    overflow: auto;
    /* overscroll-behavior: none; */
    /*滚动时浏览器滚动条不会跟着滚动*/
  }

  .user-dynamic-container-list {
    padding-top: 12px;
  }

  .dynamic-list-item {
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    /*将垂直显示*/
    cursor: pointer;
    transition: all .3s;
  }

  .dynamic-list-item:hover {
    background-color: #F4F4F4;
  }

  .dynamic-list-item-container {
    display: flex;
    flex-direction: row;
    /*将水平显示*/
  }

  .item-container-left {
    width: 36px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    /* position: relative; */
  }

  .item-container-left-img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
  }

  .item-container-left-icon {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    right: -2px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .item-container-middle {
    flex: 1;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .container-middle-container {
    color: #505050;
    font-size: 12px;
  }

  .container-middle-container>span:nth-child(2) {
    color: #999999;
    margin-left: 10px;
    display: inline-block;
  }

  .container-middle-container-title {
    margin-top: 6px;
    font-size: 14px;
    color: #212121;
    font-weight: 500;
    max-width: 200px;
  }

  .item-container-right {
    width: 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .item-container-right-img {
    width: 64px;
    height: 36px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    position: relative;
  }

  .item-container-right-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, .6);
    left: 50%;
    top: 50%;
    text-align: center;
    line-height: 24px;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    visibility: hidden;
    border-radius: 2px;
    transition: all .3s;
  }

  .item-container-right-icon>i {
    font-size: 24px;
    color: #FFFFFF;
  }

  .item-container-right-img:hover .item-container-right-icon {
    opacity: 1;
    visibility: visible;
  }

  .item-container-right-text {
    position: absolute;
    left: 0;
    top: -20px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 12px;
    color: #FFFFFF;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
  }

  .item-container-right-icon:hover+.item-container-right-text {
    opacity: 1;
    visibility: visible;
  }

  .dynamic-more-btn {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
  }

  .dynamic-more-button {
    flex: 1;
    height: 32px;
    background: #f4f4f4;
    color: #212121;
    border: none;
    font-size: 14px;
    cursor: pointer;
  }

  .dynamic-more-button:hover {
    background-color: #e7e7e7;
  }

  /* 收藏 */
  .userInfo-center-collection {
    width: 519px;
    left: -256px;
    height: 518px;
    display: flex;
    justify-content: space-between;
  }

  .center-triangle-collection {
    left: 262px;
  }

  .collection-left-tabs {
    width: 149px;
    overflow-y: auto;
    flex-shrink: 0;
    padding: 12px 0;
    height: 100%;
    border-right: 1px solid #e7e7e7;
    box-sizing: border-box;
    overscroll-behavior: none;
    /*在滚动时，覆盖浏览器默认滚动条*/
  }

  .collection-tabs-item {
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 46px;
    cursor: pointer;
    transition: all .3s;
  }

  .collection-tabs-item:hover {
    background: #f4f4f4;
  }

  .collection-tabs-item>span:nth-child(1) {
    width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .collection-tabs-item>span:nth-child(2) {
    color: #999999;
    word-wrap: normal;
    vertical-align: middle;
  }

  .collectionTabActive {
    background-color: #00A1D6 !important;
    color: #FFFFFF !important;
  }

  .collectionSpanActive {
    color: #FFFFFF !important;
  }

  .collection-left-videos {
    padding-top: 12px;
    height: 100%;
    flex: 1;
    box-sizing: border-box;
  }

  .collection-videos-list {
    overflow-y: auto;
    width: 370px;
    height: calc(100% - 46px);
    overscroll-behavior: none;
  }

  .collection-videos-list-item {
    display: flex;
    flex-shrink: 0;
    padding: 8px 5px 8px 20px;
    height: 77px;
    cursor: pointer;
    transition: all .3s;
    box-sizing: border-box;
  }

  .collection-videos-list-item:hover {
    background: #f4f4f4;
  }

  .collection-videos-left {
    width: 108px;
    height: 61px;
    position: relative;
  }

  .coll-img-box>img {
    flex-shrink: 0;
    width: 108px;
    height: 61px;
    border-radius: 2px;
  }

  .coll-video-time {
    position: absolute;
    bottom: 4px;
    right: 4px;
    color: #FFFFFF;
    background: rgba(0, 0, 0, .5);
    font-size: 12px;
    padding: 0 2px;
    border-radius: 1px;
  }

  .collection-videos-right {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    /*垂直显示*/
    flex-shrink: 0;
    justify-content: space-between;
  }

  .coll-video-title2 {
    max-width: 210px;
    height: 37px;
    color: #212121;
    font-weight: 500;
    font-size: 14px;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .coll-video-name {
    display: flex;
    color: #999999;
    font-size: 12px;
  }

  .coll-video-name>span {
    overflow: hidden;
    margin-right: 15px;
    max-width: 110px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .coll-play-all {
    display: flex;
  }

  .coll-play-left {
    display: flex;
    bottom: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-top: 1px solid #e7e7e7;
    background-color: #FFFFFF;
    line-height: 45px;
    cursor: pointer;
    transition: all .3s;
  }

  .coll-play-right {
    display: flex;
    bottom: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-top: 1px solid #e7e7e7;
    background-color: #FFFFFF;
    line-height: 45px;
    cursor: pointer;
    transition: all .3s;
    color: #00a1d6;
  }

  .coll-play-right>i {
    margin-right: 10px;
    color: #00A1D6 !important;
  }

  .coll-play-left:hover,
  .coll-play-right:hover {
    background: #f4f4f4;
  }

  /* 历史 */
  .userInfo-center-history {
    width: 370px;
    left: -171px;
    height: auto;
  }

  .center-triangle-history {
    left: 179px;
  }

  .user-history-content {
    height: 468px;
    overflow-y: auto;
    overscroll-behavior: none;
  }

  .user-history-day {
    font-size: 12px;
    color: #999999;
    padding: 15px 0 4px 20px;
  }

  .user-history-item {
    display: flex;
    flex-shrink: 0;
    padding: 8px 5px 8px 20px;
    height: 77px;
    cursor: pointer;
    transition: all .3s;
    box-sizing: border-box;
  }

  .user-history-item:hover {
    background-color: #F4F4F4;
  }

  .user-history-item-left {
    position: relative;
    text-align: center;
  }

  .history-item-img>img {
    width: 108px;
    flex-shrink: 0;
    height: 61px;
    border-radius: 2px;
    vertical-align: middle;
  }

  .history-item-speed {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #757575;
    border-radius: 0 0 2px 2px;
  }

  .history-item-speed>div {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 100%;
    height: 3px;
    border-radius: 0 0 2px 2px;
    background-color: #fb7299;
  }

  .history-item-livestate {
    font-size: 12px;
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 0 3px;
    height: 16px;
    line-height: 16px;
    border-radius: 1px;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, .5);
  }

  .user-history-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    margin-left: 12px;
  }

  .history-item-title {
    max-width: 210px;
    height: 37px;
    font-weight: 500;
    font-size: 14px;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .history-item-videoinfo {
    display: flex;
    color: #999999;
    font-size: 12px;
  }

  .history-video-info>i {
    margin-right: 2px;
    /* vertical-align: middle; */
  }

  .history-item-videoinfo>span {
    overflow: hidden;
    margin: 0 15px 0 5px;
    max-width: 110px;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 20px;
  }

  .history-more-btn {
    cursor: pointer;
    width: 330px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #f4f4f4;
    font-size: 14px;
    color: #212121;
    margin: 16px auto;
    transition: all .3s;
  }

  .history-more-btn:hover {
    background: #e7e7e7;
  }

  /* 投稿 */
  .userInfo-center-cont {
    width: 304px;
    left: -185px;
    top: 50px;
    height: 78px;
  }

  .center-triangle-cont {
    left: 227px;
  }

  .contr-container {
    display: flex;
    height: 78px;
  }

  .contr-item {
    width: 76px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    line-height: 1;
  }

  .contr-item>i {
    color: #757575;
    font-size: 26px;
    vertical-align: middle;
  }

  .contr-item>span {
    margin-top: 8px;
  }

  .contr-item:hover {
    background-color: #f4f4f4;
    color: #212121;
  }
</style>
